<template>
  <div class="dynamic-background">
    <!-- 1. 光点呼吸效果 -->
    <canvas 
      v-show="currentBg === 'breathing'" 
      ref="breathingCanvas" 
      class="bg-canvas"
    ></canvas>

    <!-- 2. 能量场效果 -->
    <canvas 
      v-show="currentBg === 'energy'" 
      ref="energyCanvas" 
      class="bg-canvas"
    ></canvas>

    <!-- 3. 数据脉冲效果 -->
    <canvas 
      v-show="currentBg === 'pulse'" 
      ref="pulseCanvas" 
      class="bg-canvas"
    ></canvas>

    <!-- 4. 微粒漂浮效果 -->
    <canvas 
      v-show="currentBg === 'floating'" 
      ref="floatingCanvas" 
      class="bg-canvas"
    ></canvas>

    <!-- 5. 光晕渐变效果 -->
    <div v-show="currentBg === 'glow'" class="glow-background">
      <div class="glow-orb glow-orb-1"></div>
      <div class="glow-orb glow-orb-2"></div>
      <div class="glow-orb glow-orb-3"></div>
    </div>

    <!-- 6. 线条流动效果 -->
    <canvas 
      v-show="currentBg === 'lines'" 
      ref="linesCanvas" 
      class="bg-canvas"
    ></canvas>

    <!-- 7. 网格脉冲效果 -->
    <div v-show="currentBg === 'gridPulse'" class="grid-pulse-background">
      <div class="grid-layer"></div>
    </div>

    <!-- 8. 辐射线效果 -->
    <canvas 
      v-show="currentBg === 'radial'" 
      ref="radialCanvas" 
      class="bg-canvas"
    ></canvas>

    <!-- 9. 波纹扩散效果 -->
    <canvas 
      v-show="currentBg === 'ripple'" 
      ref="rippleCanvas" 
      class="bg-canvas"
    ></canvas>

    <!-- 10. 氛围光效果 -->
    <div v-show="currentBg === 'ambient'" class="ambient-background">
      <div class="ambient-layer ambient-layer-1"></div>
      <div class="ambient-layer ambient-layer-2"></div>
      <div class="ambient-layer ambient-layer-3"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const currentBg = ref('breathing')
const breathingCanvas = ref(null)
const energyCanvas = ref(null)
const pulseCanvas = ref(null)
const floatingCanvas = ref(null)
const linesCanvas = ref(null)
const radialCanvas = ref(null)
const rippleCanvas = ref(null)

let animationFrameId = null
let breathingCtx = null
let energyCtx = null
let pulseCtx = null
let floatingCtx = null
let linesCtx = null
let radialCtx = null
let rippleCtx = null

// 光点呼吸数据
const breathingDots = []
const breathingDotCount = 50
let breathingPhase = 0

// 能量场数据
let energyPhase = 0

// 数据脉冲数据
const pulseLines = []
let pulseTime = 0

// 微粒漂浮数据
const floatingParticles = []
const floatingParticleCount = 30

// 线条流动数据
const flowLines = []

// 辐射线数据
let radialPhase = 0

// 波纹数据
const ripples = []
let rippleTimer = 0

// 1. 初始化光点呼吸效果
const initBreathing = () => {
  const canvas = breathingCanvas.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  breathingCtx = canvas.getContext('2d')

  breathingDots.length = 0
  for (let i = 0; i < breathingDotCount; i++) {
    breathingDots.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      baseRadius: Math.random() * 3 + 2,
      phase: Math.random() * Math.PI * 2
    })
  }
}

// 绘制光点呼吸效果
const drawBreathing = () => {
  const canvas = breathingCanvas.value
  if (!canvas || !breathingCtx) return

  breathingCtx.fillStyle = 'rgba(10, 14, 39, 1)'
  breathingCtx.fillRect(0, 0, canvas.width, canvas.height)

  breathingPhase += 0.01

  breathingDots.forEach(dot => {
    const breath = Math.sin(breathingPhase + dot.phase) * 0.5 + 0.5
    const radius = dot.baseRadius * (0.5 + breath * 0.5)
    const alpha = 0.2 + breath * 0.3

    const gradient = breathingCtx.createRadialGradient(dot.x, dot.y, 0, dot.x, dot.y, radius * 3)
    gradient.addColorStop(0, `rgba(102, 126, 234, ${alpha})`)
    gradient.addColorStop(0.5, `rgba(102, 126, 234, ${alpha * 0.3})`)
    gradient.addColorStop(1, 'rgba(102, 126, 234, 0)')

    breathingCtx.fillStyle = gradient
    breathingCtx.beginPath()
    breathingCtx.arc(dot.x, dot.y, radius * 3, 0, Math.PI * 2)
    breathingCtx.fill()
  })
}

// 2. 初始化能量场效果
const initEnergy = () => {
  const canvas = energyCanvas.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  energyCtx = canvas.getContext('2d')
}

// 绘制能量场效果
const drawEnergy = () => {
  const canvas = energyCanvas.value
  if (!canvas || !energyCtx) return

  energyCtx.fillStyle = 'rgba(10, 14, 39, 1)'
  energyCtx.fillRect(0, 0, canvas.width, canvas.height)

  energyPhase += 0.005

  // 绘制等高线式能量场
  for (let i = 0; i < 6; i++) {
    energyCtx.beginPath()
    for (let x = 0; x < canvas.width; x += 10) {
      const offset = i * Math.PI / 3
      const y = canvas.height / 2 + 
                Math.sin(x * 0.01 + energyPhase + offset) * 80 +
                Math.sin(x * 0.02 + energyPhase * 0.5 + offset) * 40
      
      if (x === 0) {
        energyCtx.moveTo(x, y)
      } else {
        energyCtx.lineTo(x, y)
      }
    }
    
    energyCtx.strokeStyle = `rgba(102, 126, 234, ${0.15 - i * 0.02})`
    energyCtx.lineWidth = 1
    energyCtx.stroke()
  }
}

// 3. 初始化数据脉冲效果
const initPulse = () => {
  const canvas = pulseCanvas.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  pulseCtx = canvas.getContext('2d')

  pulseLines.length = 0
  for (let i = 0; i < 12; i++) {
    pulseLines.push({
      x: (canvas.width / 13) * (i + 1),
      height: 0,
      speed: Math.random() * 2 + 1,
      delay: i * 100
    })
  }
}

// 绘制数据脉冲效果
const drawPulse = () => {
  const canvas = pulseCanvas.value
  if (!canvas || !pulseCtx) return

  pulseCtx.fillStyle = 'rgba(10, 14, 39, 1)'
  pulseCtx.fillRect(0, 0, canvas.width, canvas.height)

  pulseTime += 1

  pulseLines.forEach((line, index) => {
    if (pulseTime > line.delay) {
      line.height += line.speed
      if (line.height > canvas.height) {
        line.height = 0
        line.delay = pulseTime + 100
      }

      const gradient = pulseCtx.createLinearGradient(0, canvas.height, 0, canvas.height - line.height)
      gradient.addColorStop(0, 'rgba(102, 126, 234, 0)')
      gradient.addColorStop(0.5, 'rgba(102, 126, 234, 0.5)')
      gradient.addColorStop(1, 'rgba(102, 126, 234, 0)')

      pulseCtx.fillStyle = gradient
      pulseCtx.fillRect(line.x - 2, canvas.height - line.height, 4, line.height)
    }
  })
}

// 4. 初始化微粒漂浮效果
const initFloating = () => {
  const canvas = floatingCanvas.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  floatingCtx = canvas.getContext('2d')

  floatingParticles.length = 0
  for (let i = 0; i < floatingParticleCount; i++) {
    floatingParticles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.3,
      vy: (Math.random() - 0.5) * 0.3,
      radius: Math.random() * 2 + 1,
      alpha: Math.random() * 0.3 + 0.2
    })
  }
}

// 绘制微粒漂浮效果
const drawFloating = () => {
  const canvas = floatingCanvas.value
  if (!canvas || !floatingCtx) return

  floatingCtx.fillStyle = 'rgba(10, 14, 39, 1)'
  floatingCtx.fillRect(0, 0, canvas.width, canvas.height)

  floatingParticles.forEach(particle => {
    particle.x += particle.vx
    particle.y += particle.vy

    if (particle.x < 0) particle.x = canvas.width
    if (particle.x > canvas.width) particle.x = 0
    if (particle.y < 0) particle.y = canvas.height
    if (particle.y > canvas.height) particle.y = 0

    const gradient = floatingCtx.createRadialGradient(
      particle.x, particle.y, 0,
      particle.x, particle.y, particle.radius * 2
    )
    gradient.addColorStop(0, `rgba(102, 126, 234, ${particle.alpha})`)
    gradient.addColorStop(1, 'rgba(102, 126, 234, 0)')

    floatingCtx.fillStyle = gradient
    floatingCtx.beginPath()
    floatingCtx.arc(particle.x, particle.y, particle.radius * 2, 0, Math.PI * 2)
    floatingCtx.fill()
  })
}

// 6. 初始化线条流动效果
const initLines = () => {
  const canvas = linesCanvas.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  linesCtx = canvas.getContext('2d')

  flowLines.length = 0
  for (let i = 0; i < 20; i++) {
    flowLines.push({
      y: (canvas.height / 21) * (i + 1),
      offset: Math.random() * canvas.width,
      speed: Math.random() * 0.5 + 0.2
    })
  }
}

// 绘制线条流动效果
const drawLines = () => {
  const canvas = linesCanvas.value
  if (!canvas || !linesCtx) return

  linesCtx.fillStyle = 'rgba(10, 14, 39, 1)'
  linesCtx.fillRect(0, 0, canvas.width, canvas.height)

  flowLines.forEach((line, index) => {
    line.offset += line.speed
    if (line.offset > canvas.width) line.offset = 0

    const gradient = linesCtx.createLinearGradient(line.offset - 100, 0, line.offset + 100, 0)
    gradient.addColorStop(0, 'rgba(102, 126, 234, 0)')
    gradient.addColorStop(0.5, `rgba(102, 126, 234, ${0.3 - index * 0.01})`)
    gradient.addColorStop(1, 'rgba(102, 126, 234, 0)')

    linesCtx.strokeStyle = gradient
    linesCtx.lineWidth = 1
    linesCtx.beginPath()
    linesCtx.moveTo(0, line.y)
    linesCtx.lineTo(canvas.width, line.y)
    linesCtx.stroke()

    // 绘制流动的亮点
    linesCtx.fillStyle = `rgba(102, 126, 234, ${0.6 - index * 0.02})`
    linesCtx.beginPath()
    linesCtx.arc(line.offset, line.y, 2, 0, Math.PI * 2)
    linesCtx.fill()
  })
}

// 8. 初始化辐射线效果
const initRadial = () => {
  const canvas = radialCanvas.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  radialCtx = canvas.getContext('2d')
}

// 绘制辐射线效果
const drawRadial = () => {
  const canvas = radialCanvas.value
  if (!canvas || !radialCtx) return

  radialCtx.fillStyle = 'rgba(10, 14, 39, 1)'
  radialCtx.fillRect(0, 0, canvas.width, canvas.height)

  radialPhase += 0.005
  const centerX = canvas.width / 2
  const centerY = canvas.height / 2

  for (let i = 0; i < 24; i++) {
    const angle = (Math.PI * 2 / 24) * i
    const opacity = (Math.sin(radialPhase + i * 0.2) + 1) * 0.5
    const length = Math.min(canvas.width, canvas.height) * 0.6

    const gradient = radialCtx.createLinearGradient(
      centerX, centerY,
      centerX + Math.cos(angle) * length,
      centerY + Math.sin(angle) * length
    )
    gradient.addColorStop(0, `rgba(102, 126, 234, ${opacity * 0.2})`)
    gradient.addColorStop(0.5, `rgba(102, 126, 234, ${opacity * 0.1})`)
    gradient.addColorStop(1, 'rgba(102, 126, 234, 0)')

    radialCtx.strokeStyle = gradient
    radialCtx.lineWidth = 1
    radialCtx.beginPath()
    radialCtx.moveTo(centerX, centerY)
    radialCtx.lineTo(
      centerX + Math.cos(angle) * length,
      centerY + Math.sin(angle) * length
    )
    radialCtx.stroke()
  }
}

// 9. 初始化波纹扩散效果
const initRipple = () => {
  const canvas = rippleCanvas.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  rippleCtx = canvas.getContext('2d')
}

// 绘制波纹扩散效果
const drawRipple = () => {
  const canvas = rippleCanvas.value
  if (!canvas || !rippleCtx) return

  rippleCtx.fillStyle = 'rgba(10, 14, 39, 0.1)'
  rippleCtx.fillRect(0, 0, canvas.width, canvas.height)

  rippleTimer++
  
  // 每隔一段时间创建新波纹
  if (rippleTimer % 120 === 0) {
    ripples.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: 0,
      maxRadius: Math.random() * 200 + 100,
      alpha: 0.5
    })
  }

  // 绘制并更新波纹
  for (let i = ripples.length - 1; i >= 0; i--) {
    const ripple = ripples[i]
    ripple.radius += 2
    ripple.alpha -= 0.005

    if (ripple.alpha <= 0) {
      ripples.splice(i, 1)
      continue
    }

    rippleCtx.strokeStyle = `rgba(102, 126, 234, ${ripple.alpha})`
    rippleCtx.lineWidth = 2
    rippleCtx.beginPath()
    rippleCtx.arc(ripple.x, ripple.y, ripple.radius, 0, Math.PI * 2)
    rippleCtx.stroke()
  }
}

// 动画循环
const animate = () => {
  switch (currentBg.value) {
    case 'breathing':
      drawBreathing()
      break
    case 'energy':
      drawEnergy()
      break
    case 'pulse':
      drawPulse()
      break
    case 'floating':
      drawFloating()
      break
    case 'lines':
      drawLines()
      break
    case 'radial':
      drawRadial()
      break
    case 'ripple':
      drawRipple()
      break
  }
  animationFrameId = requestAnimationFrame(animate)
}

// 切换背景
const switchBackground = (bgType) => {
  currentBg.value = bgType
  
  // 取消当前动画
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId)
  }

  // 初始化新背景
  switch (bgType) {
    case 'breathing':
      initBreathing()
      break
    case 'energy':
      initEnergy()
      break
    case 'pulse':
      initPulse()
      break
    case 'floating':
      initFloating()
      break
    case 'lines':
      initLines()
      break
    case 'radial':
      initRadial()
      break
    case 'ripple':
      initRipple()
      break
  }

  // 重新开始动画
  if (bgType !== 'glow' && bgType !== 'gridPulse' && bgType !== 'ambient') {
    animate()
  }
}

// 窗口大小改变处理
const handleResize = () => {
  switchBackground(currentBg.value)
}

onMounted(() => {
  initBreathing()
  animate()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId)
  }
  window.removeEventListener('resize', handleResize)
})

// 暴露切换方法
defineExpose({
  switchBackground,
  currentBg
})
</script>

<style scoped>
.dynamic-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 5. 光晕渐变效果 */
.glow-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1d3d 100%);
  overflow: hidden;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  animation: floatOrb 20s ease-in-out infinite;
}

.glow-orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #667eea 0%, transparent 70%);
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.glow-orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #764ba2 0%, transparent 70%);
  top: 50%;
  right: 10%;
  animation-delay: 7s;
}

.glow-orb-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #f093fb 0%, transparent 70%);
  bottom: 20%;
  left: 50%;
  animation-delay: 14s;
}

@keyframes floatOrb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(50px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-50px, 50px) scale(0.9);
  }
}

/* 7. 网格脉冲效果 */
.grid-pulse-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1d3d 100%);
  overflow: hidden;
}

.grid-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 99px, rgba(102, 126, 234, 0.05) 99px, rgba(102, 126, 234, 0.05) 100px),
    repeating-linear-gradient(90deg, transparent, transparent 99px, rgba(102, 126, 234, 0.05) 99px, rgba(102, 126, 234, 0.05) 100px);
  animation: gridMove 40s linear infinite;
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100px, 100px);
  }
}

/* 10. 氛围光效果 */
.ambient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1d3d 100%);
  overflow: hidden;
}

.ambient-layer {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
}

.ambient-layer-1 {
  background: radial-gradient(ellipse at 30% 40%, rgba(102, 126, 234, 0.15) 0%, transparent 50%);
  animation: ambientMove1 30s ease-in-out infinite;
}

.ambient-layer-2 {
  background: radial-gradient(ellipse at 70% 60%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
  animation: ambientMove2 25s ease-in-out infinite;
}

.ambient-layer-3 {
  background: radial-gradient(ellipse at 50% 50%, rgba(240, 147, 251, 0.08) 0%, transparent 50%);
  animation: ambientMove3 35s ease-in-out infinite;
}

@keyframes ambientMove1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(100px, -100px); }
}

@keyframes ambientMove2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-80px, 80px); }
}

@keyframes ambientMove3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(60px, 120px); }
}
</style>
